class Login {
    constructor() {
        this.btn = document.querySelectorAll('.formBox>ul>li')
        this.tab = document.querySelectorAll('.tab>div')
        this.reg = document.querySelector('.reg')
        this.regUser = document.querySelector('.regUser')
        this.regPwd = document.querySelector('.regPwd')
        this.regPwd2 = document.querySelector('.regPwd-again')
        this.login = document.querySelector('.login')
        this.loginUser = document.querySelector('.loginUser')
        this.loginPwd = document.querySelector('.loginPwd')
        this.init()
    }
    init() {
        this.hidden()
        this.regBox()
        this.loginBox()
    }
    hidden() {
        this.btn[0].onclick = () => {
            this.btn[0].className = 'bg'
            this.btn[1].className = ''
            this.tab[0].style.display = 'block'
            this.tab[1].style.display = 'none'
        }
        this.btn[1].onclick = () => {
            this.btn[1].className = 'bg'
            this.btn[0].className = ''
            this.tab[0].style.display = 'none'
            this.tab[1].style.display = 'block'
        }
    }
    regBox() {
        this.reg.onclick = () => {
            let res = /^[a-z]+$/i
            let res1 = /^(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9~!@&%#_]{8,16}$/
            if (!res.test(this.regUser.value)) {
                alert('用户名只能为英文哦')
            }
            if (!res1.test(this.regPwd.value)) {
                alert('密码必须由大小写字母，且8-16位')
            }
            if (this.regUser.value == '' || this.regPwd.value == '' || this.regPwd2.value == '') {
                alert('完成全部注册步骤载点击注册哦！')
            } else if (res.test(this.regUser.value) == true && res1.test(this.regPwd.value) == true) {
                if (this.regPwd.value == this.regPwd2.value) {
                    setCookie('username', this.regUser.value)
                    setCookie('password', this.regPwd.value)

                    //跳转页面到主页面
                    this.tab[0].style.display = 'block'
                    this.tab[1].style.display = 'none'
                    this.btn[0].className = 'bg'
                    this.btn[1].className = ''
                    alert('注册成功')
                } else {
                    alert('两次密码不一致')
                }
            }
        }
    }
    loginBox() {
        this.login.onclick = () => {
            if (this.loginUser.value == '' || this.loginPwd.value == '') {
                alert('请输入用户名和密码')
            } else {
                if (this.loginUser.value == getCookie('username') && this.loginPwd.value == getCookie('password')) {
                    location.href = '../index.html'
                } else {
                    alert('用户名或密码输入错误')
                }
            }
        }
    }
}
new Login()
